<template>
<div class="hotel-picture">
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="名称"
      width="200">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name" placeholder="请输入图片名称"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="图片"
      width="800">
      <template slot-scope="scope">
        <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
        </el-upload>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="deleteImage(scope.$index)">删除行</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="btn">
      <el-button type="text" @click="addLine">新增下一行</el-button>
  </div>
  <ButtonFooter />
</div>
</template>
  
<script>
  const ButtonFooter = () => import('@/components/common/ButtonFooter')
  export default {
    name: 'HotelPicture',
    data () {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        form: {
          desc: ''
        },
        tableData: [{name: '', imageUrl: ''}]
      }
    },
    methods: {
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      deleteImage (row) {
        console.log(row)
      },
      addLine () {
        this.tableData.push({name: '', ImageUrl: ''})
        console.log(this.dialogImageUrl)
      }
    },
    components: {
      ButtonFooter
    }
  }
</script>

<style lang="scss">
    .hotel-picture {
        margin-bottom: 55px;
        margin-top: 30px;
        .btn {
           margin-top: 20px;
           text-align: left;
       }
      .el-table th{
        line-height: 23px;
      }
    }
    .el-table_1_column_2 {
        text-align: left;
    }
    .el-table th {
        background-color: #eef1f9;
    }
    .el-table__body, .el-table__footer, .el-table__header {
        width: 100%!important;
    }
    .el-table--border td, .el-table--border th {
        border-right: none;
    }
    .el-table--border td{
      padding: 10px 0 7px 20px;
    }
    .el-table--border {
        border-right: 1px solid #e7e9f1;
    }
    .el-upload--picture-card{
      float: left;
      width: 130px;
      height: 100px;
      line-height: 100px;
    }
    .el-upload__tip{
      float: left;
      margin-top: 80px;
      margin-left:10px; 
      color: #aebac6;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 130px;
      height: 100px;
      float: left;
      margin-bottom: 0px;
    }
</style>
